/**
 *@auther: tang
 @Date: 2020-11-09
 *Project: group-booking-shop-manage-system
 */

import React, { Component} from "react";
import Req from "../api"
import {Observer,inject} from "mobx-react"
import {message, Form, Input, Button, Checkbox, Card, Col,Row} from 'antd';
import BasicCode from "../components/BasicCode";
import "./login/Login.less"
import logo from "../assets/img/logo_home.png"
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
@inject("userStore")
@Observer
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
            rediectToReferrer: false, // 是否重定向之前的界面
            vertifyCode:""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSumit = this.handleSumit.bind(this);
    }
    // 处理用户名、密码的变化
    handleChange(e) {
        if (e.target.name === "username") {
            this.setState({
                username: e.target.value,
            });
        } else if (e.target.name === "password") {
            this.setState({
                password: e.target.value,
            });
        }
    }
    // 提交登录表单
    async handleSumit(data) {
        console.log(data);
        const username = data.username;
        const password = data.password;
        const remember = data.remember;
        const code = data.Field;
        if (username.length === 0 || password.length === 0) {
            message.error("用户名或密码不能为空")
            return;
        }
        if (code===this.state.vertifyCode){
                Req.userLogin({username:username,password,remember}).then(res=>{
                    console.log(res);
                    if (res.returnCode===200){
                        message.success("登录成功")
                        // 保存信息到sessionStorage
                        //将信息保存到mobx
                        this.props.userStore.menuInfo = res.data.menuInfo;

                        this.props.userStore.userInfo = res.data.userInfo;
                        this.props.userStore.token = res.token
                        // 登录成功后，设置redirectToReferrer为true;
                        this.setState({
                            rediectToReferrer: true,
                        });
                        console.log(this.props.location);
                        //保存密码
                        if (remember){
                            localStorage.setItem("userPass",JSON.stringify(data))
                        }
                        // 登陆成功之后的跳转
                        this.props.history.push({pathname:"/index"});
                    }else{
                        message.error("用户名或密码错误")
                    }

                }).catch(err=>{
                    console.log(err);
                    message.error("用户名或密码错误")
                })
        } else{
            message.error("验证码输入错误")
        }

    }
    codeCLick(e){
        // console.log(e)
        this.setState({
            vertifyCode:e
        })

    }
    render() {
        return (
            <div className="loginMain">
                <div className="loginForm">
                    <Row>
                        <Col span={16}></Col>
                        <Col>
                            <Card title="实惠拼商城后台管理系统" headStyle={{textAlign:"center",fontWeight:"bold",fontSize:"19px"}}  className="loginCard">
                                <Form
                                    hideRequiredMark={true}
                                    {...layout}
                                    name="basic"
                                    initialValues={{
                                        remember: true,
                                    }}
                                    onFinish={this.handleSumit}
                                >
                                    <Form.Item
                                        label="用户名"
                                        name="username"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入用户名！',
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item
                                        label="密码"
                                        name="password"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入密码!',
                                            },
                                        ]}
                                    >
                                        <Input.Password />
                                    </Form.Item>
                                    <Form.Item
                                        label="验证码"
                                    >
                                        <Form.Item name="Field" noStyle  rules={[
                                            {
                                                required: true,
                                                message: '请输入验证码!',
                                            },
                                        ]}>
                                            <Input />
                                        </Form.Item>
                                        <BasicCode verCodeClick={this.codeCLick.bind(this)}/>
                                    </Form.Item>
                                    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                                        <Checkbox>记住我的密码</Checkbox>
                                    </Form.Item>

                                    <Form.Item {...tailLayout}>
                                        <Button type="primary" htmlType="submit">
                                            登录
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>

                    </Row>

                </div>
            </div>


        );
    }
}
export default Login;
